//随机切换位置和图片
function randImgPos(){
    randIndex++;
    randIndex %=4;
    $bigImg.prop('src',imgArr[randIndex]);
    $s_color.css('background-image',`url('${imgArr[randIndex]}')`);
    black_top=parseInt(Math.random()*61)+5;//随机y
    black_left=parseInt(Math.random()*170)+50;//随机x
    $s_black.css({
        top:black_top+'px',
        left:black_left+'px'
    });
    let color_top=black_top+2+'px';
    $s_color.css({
        top:color_top,
        backgroundPosition:`-${black_left}px -${black_top}px`
    });
}
//登录按钮的var
const ERR=['请输入账户名和密码','请输入账户名','请输入密码','账户名和密码不匹配,请重新输入','网络不稳定,请稍后重试'];
var $inputs=$('.login-main input');
var $loginBtn=$('.login-btn');
var $errMsg=$('.errMsg');
//验证拼图的var
let isMouseDown=false;
var $slideBtn=$('.slide-btn');
var $slideProcess=$('.slide-process');
var $slidebar=$('.slide-bar');
var $form=$('.login-form');
var $vcode=$('.vcode');
var $bigImg=$('.vcode-img-big img');
var $s_black=$('.vcode-black');
var $s_color=$('.vcode-img-small');
var $refreshBtn=$('.vcode-refresh-btn');
var $closeBtn=$('.vcode-close');
let maxW;
let maxMoveX;
let isOK=false;
let user;
let pwd;
//登录按钮的func
$inputs.focus(function() {
    $(this).prev().css('background-color','#E8E8E8')
});
$inputs.blur(function () {
    $(this).prev().css('background-color','#f4f4f3')
});
$loginBtn.click(function() {
    user=$inputs[0].value;
    pwd=$inputs[1].value;
    if(!isOK){
        if(!user.length && !pwd.length){
            $errMsg.text(ERR[0]);
            $inputs[0].focus();
        }else if(!user.length){
            $errMsg.text(ERR[1]);
            $inputs[0].focus();
        }else if(!pwd.length){
            $errMsg.text(ERR[2]);
            $inputs[1].focus();
        }else{
            $vcode.show();
            randImgPos();
            maxMoveX=$slidebar[0].clientWidth-$slideBtn[0].clientWidth;
            maxW=$slidebar[0].clientWidth;
        }
    }
});
//验证拼图的func
let subX=$form[0].offsetLeft+$vcode[0].offsetLeft+$slidebar[0].offsetLeft;
let oW=$slideProcess.css('width');
oW=oW.replace('px','');
const imgArr=['a.jpg','b.jpg','c.jpg','d.jpg'];
//初始化 随机位置
let randIndex=parseInt(Math.random()*4);
$bigImg.prop('src',imgArr[randIndex]);//图片显示
$s_color.css('background-image',`url('${imgArr[randIndex]}')`);//小图块显示
$bigImg.ready(function () {
    $s_black.show();
    $s_color.show();
});
let black_top;
let black_left;
$refreshBtn.click(function () {
    randImgPos();
});

$closeBtn.click(function () {
    $vcode.hide();
});

$slideBtn.mousedown(function (e) {
    e = e || window.e;
    isMouseDown=true;
    let x=e.clientX-subX;
    subX=subX+x;
});
function pinOK(){
    $slideProcess.css({width:maxW+'px'});
    $slideBtn.hide();
    $refreshBtn.hide();
    $closeBtn.hide();
    $slideProcess.text('拼接成功');
    $loginBtn.text('正在登录...');
}
function pin(){
    $slideProcess.css({width:oW+'px'});
    $slideBtn.show();
    $refreshBtn.show();
    $closeBtn.show();
    $slideProcess.text('');
    $loginBtn.text("登 录");
}
$(window).mouseup(async function () {
    let isMD=isMouseDown;
    let currX=$s_color.css('left');
    currX=currX.replace('px','');
    if(isMouseDown && currX > (black_left-2) && currX < (black_left+5)){
        //验证成功
        isOK=true;
        pinOK();
    }else if(isMouseDown){
        //验证失败
        $slideProcess.css('background-color','#FF5B57');
    }
    isMouseDown=false;
    if(!isOK){
        setTimeout(()=>{
            if(isMD){
                randImgPos();
            }
            $slideProcess.css({
                width:oW+'px',
                backgroundColor:'#10b2fa'
            });
            $slideBtn.css('left',0);
            $s_color.css('left','2px');
        },1000);
    }else if(isMD && isOK){
        let statuCode=await new Promise((resolve)=>{
            $.ajax({
                type:'POST',
                data:{user,pwd},
                url:'http://127.0.0.1:8080/login',
                success:(data)=>{
                    resolve(data)
                }
            });
        });
        if(statuCode!=1){
            //账户密码不匹配
            isOK=false;
            setTimeout(()=>{
                pin();
                $vcode.hide();
                if(statuCode==0){
                    $inputs.val('');
                    $errMsg.text(ERR[3]);
                }else{
                    $errMsg.text(ERR[4]);
                }
            },1000);
        }else{
            setTimeout(()=>{
                window.location.href="/index";
            },1000);
        }
    }
});

$(window).mousemove(function (e) {
    e = e || window.e;
    let currX=e.clientX-subX;
    if(isMouseDown){
        let nW=parseInt(oW)+parseInt(currX);
        if(nW<oW){
            nW=oW;
        }
        if(nW>maxW){
            nW=maxW;
        }
        if(currX<0){
            currX=0;
        }
        if(currX>maxMoveX){
            currX=maxMoveX;
        }
        $slideProcess.css('width',nW+'px');
        $slideBtn.css('left',currX);
        $s_color.css('left',currX);
    }
});